@extends('admin.layouts.app')
@section('css')
 @parent
 <style>
        .ss-main {
            height: 730px;
        }
        .span-parent {
            text-align: center;
        }
        .span-parent span {
            display: inline-block;
            width: 50px;
        }
        .jc-line {
            padding: 5px 0;
            border-bottom: 1px solid #ccc;
        }
    </style>
    <link href="{{asset('css/sweetalert.css')}}" rel="stylesheet">
@endsection
@section('content')
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
    <section class="content-header">
        <a class="btn btn-primary" href="javascript:history.go(-1);" role="button">返回</a>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <!-- AREA CHART -->
          <div class="box box-primary" style="border-top-color:transparent;">
            <div class="box-body">
              <div class="chart ss-main">
                
                    <ul class="nav nav-tabs" id="jc_nav">
                        <li role="presentation" class="active"><a href="#">账号</a></li>
                        <li role="presentation"><a href="#">权限</a></li>
                    </ul>
                    <br>
                    <!-- 账号div -->
                    <div class="jc-admin-box mark_show">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">登陆</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" name="login" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">邮件</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email">
                                </div>
                            </div>
                        </div>
                       <!--  <div class="checkbox">
                            <label>
                                <input type="checkbox"> 发送邀请邮件
                            </label>
                        </div> -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">密码</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" name="password" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">确认密码</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" name="comfirmpassword" placeholder="Email">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">团队，指明这个人属于哪个组</div>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input name="role" type="radio"> 组a
                            </label>
                            <br>
                            <label>
                                <input name="role" type="radio"> 组b
                            </label>
                        </div>
                        
                    </div>

                    <!-- 权限div -->
                    <div class="jc-power-box mark_show" style="display:none;">
                        <div class="row">
                            <div class="col-xs-9">权限</div>
                            <div class="col-xs-3 span-parent">
                                <span>允许</span>
                                <span>继承</span>
                                <span>拒绝</span>
                            </div>
                        </div>
                        @foreach($permissions as $permission)
                        <div class="row jc-line">
                            <div class="col-xs-9">{{$permission['name']}}</div>
                            <div class="col-xs-3 span-parent">
                                <span>
                                    <input type="radio" name="code{{$permission['id']}}" value="{{$permission['code']}}">
                                </span>
                                <span>
                                    <input type="radio" name="code{{$permission['id']}}" value="{{$permission['code']}}" checked>
                                </span>
                                <span>
                                    <input type="radio" value="{{$permission['code']}}" name="code{{$permission['id']}}">
                                </span>
                            </div>
                        </div>
                        @endforeach
                        <br>

                    </div>

                    <!-- 按钮 -->
                    <div class="row" style="margin-top:20px;">
                        <div class="col-xs-12">
                            <button type="button" class="btn btn-primary" id="btn-create">创建</button>
                            <button type="button" class="btn btn-primary">创建或关闭</button>
                            <button type="button" class="btn btn-primary">取消</button>
                        </div>
                    </div>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
          

        </div>
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
    </div>
@endsection
@section('js')
 @parent
 <script src="{{asset('js/sweetalert.min.js')}}"></script>
<script>
    (function() {
        var $navli = $("#jc_nav li"),
            $showbox = $(".mark_show");
        $navli.on("click",function() {
            $(this).addClass("active").siblings().removeClass("active");
            $showbox.hide();
            $showbox.eq( $(this).index() ).show();
        });
    })();

    (function() {
        var $navli = $("#jc_nav li"),
            $showbox = $(".mark_show");
        $navli.on("click",function() {
            $(this).addClass("active").siblings().removeClass("active");
            $showbox.hide();
            $showbox.eq( $(this).index() ).show();
        });
    })();
    //ajax请求
    function getData(obj) {
        var data = {},
            $tmp = null;
        for (var attr in obj) {
            var list = obj[attr];
            if (attr=='radio') {
                list.forEach(function(v,i) {
                    var val = $('input[name="'+ v +'"]:checked').val();
                    data[v] = val==void 0 ? "" : val;
                });
            } else if (attr=='checkbox') {
                list.forEach(function(v,i) {
                    var arr = [];
                    $tmp = $('input[name="'+ v +'"]');
                    $tmp.each(function(i,v) {
                        if ( $(this)[0].checked ) {
                            arr.push( $(this).val() )
                        }
                    });
                    data[v] = arr;
                });
            } else {
                list.forEach(function(v,i) {
                    var val = $('input[name="'+ v +'"]').val();
                    data[v] = val;
                });
            }
        }
        return data;
    }
    var obj = {
        'text': ['login','password','comfirmpassword','test5'],
        'radio': ['group'],
        // 'checkbox': ['test3'],
    }
    var obj2 = {
        'radio': ['name1-1','name1-2','name2-1','name2-2'],
    }
      // 获取数据
    $("#btn-create").on("click", function() {
        var data = getData(obj);
         data['permissons'] = getData(obj2);
        console.log(data);
        $.ajax({
            url: "{{admin_base_path('permissions')}}",
            type: 'POST',
            headers: {
            'X-CSRF-TOKEN': $('input[name="csrf-token"]').attr('value')
             },  
            data: data,
            success: function(data) {

                if(data.code=='0')
                {
                  swal({ 
                        title: "干得漂亮！", 
                        type: "success",
                      },
                      function(obj){
                        if(obj)
                        {
                          location.href="{{admin_base_path('permissions')}}"
                        }
                      });
                }
                else
                {
                  sweetAlert("哎呦……", "出错了！","error");
                }
            },
        })
    });

</script>
@endsection